@import "./variables.scss";

// 按钮
@mixin button($color, $fontColor: #fff, $borderColor: #fff) {
  padding: 3px 5px;

  background-color: $color;
  color: $fontColor;

  border: 1px $borderColor solid;
  border-radius: 5px;

  cursor: pointer;
}

.btn-success {
  @include button($success-color)
}

.btn-error {
  @include button($error-color)
}

.btn-info {
  @include button(#f0f0f0, #999, #ccc)
}

// margin padding

@for $i from 1 through 10 {
  .mt-#{$i * 5} {
    margin-top: $i * 5px;
  }

  .mb-#{$i * 5} {
    margin-bottom: $i * 5px;
  }

  .ml-#{$i * 5} {
    margin-left: $i * 5px;
  }

  .mr-#{$i * 5} {
    margin-right: $i * 5px;
  }

  .pt-#{$i * 5} {
    padding-top: $i * 5px;
  }

  .pb-#{$i * 5} {
    padding-bottom: $i * 5px;
  }

  .pl-#{$i * 5} {
    padding-left: $i * 5px;
  }

  .pr-#{$i * 5} {
    padding-right: $i * 5px;
  }
}
